<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!-- 头部按钮区域 -->
      <el-row :gutter="10">
        <el-col :span="3">
          <el-button
            size="medium"
            class="button-size-r"
            type="danger"
            @click="deletes()"
            >删除</el-button
          >
        </el-col>
        <el-col :span="3">
          <el-button
            size="medium"
            class="button-size-r"
            type="primary"
            @click="gotoAdd()"
            >添加新角色</el-button
          >
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <el-table
        style="width: 100%"
        :data="roleList"
        border
        stripe
        @selection-change="selectIds"
      >
        <el-table-column
          :data="roleList"
          type="selection"
          width="55"
          prop="id"
        ></el-table-column>
        <el-table-column prop="id" label="ID" sortable width="150">
        </el-table-column>
        <el-table-column prop="name" label="角色名称"> </el-table-column>
        <el-table-column prop="authName" label="权限"> </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <div v-if="scope.row.id !== 1">
              <el-button
                type="primary"
                size="mini"
                @click="gotoEdit(scope.row.id)"
                ><i class="el-icon-edit"></i
              ></el-button>

              <el-button
                type="danger"
                size="mini"
                @click="deleteById(scope.row.id)"
                ><i class="el-icon-delete"></i
              ></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="queryInfo.pageSize"
        :current-page="queryInfo.currentPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
const qs = require('qs')
export default {
  data() {
    return {
      // 角色列表
      roleList: [],
      // 表格选中的ID列表
      multipleSelection: [],
      // 查询信息
      queryInfo: {
        currentPage: 1,
        pageSize: 10,
      },
      // 数目
      total: 0,
    }
  },
  methods: {
    // 加载数据
    async getRoleList() {
      const { data: res } = await this.$http.get('admin/auth/page', {
        params: this.queryInfo,
      })
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.roleList = res.data.data
      this.total = res.data.total
    },
    // 表格选中
    selectIds(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    // 单页数目切换
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize
      this.getRoleList()
    },
    // 页码切换
    handleCurrentChange(newPage) {
      this.queryInfo.currentPage = newPage
      this.getRoleList()
    },
    // 批量删除
    async deletes() {
      const confirmResult = await this.$confirm(
        '此操作将永久删除选中的角色, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).catch((error) => error)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }

      var ids = []
      for (var i = 0; i < this.multipleSelection.length; i++) {
        ids.push(this.multipleSelection[i].id)
      }

      const { data: res } = await this.$http.get('/admin/role/deletes', {
        params: {
          ids: ids,
        },
        paramsSerializer: function (params) {
          return qs.stringify(params, { arrayFormat: 'repeat' })
        },
      })
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      if (res.data > 0) {
        this.$message.info('请求失败' + res.data + '条数据')
      } else {
        this.$message.success('操作成功')
      }
      this.getRoleList()
    },
    // 单个删除
    async deleteById(id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该角色, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).catch((error) => error)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data: res } = await this.$http.get('/admin/role/delete/' + id)
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.$message.success('删除成功')
      this.getRoleList()
    },
    // 跳转添加界面
    gotoAdd() {
      this.$router.push({
        path: 'addrole',
      })
    },
    // 跳转编辑界面
    gotoEdit(id) {
      this.$router.push({
        path: 'editrole',
        query: {
          name: 'id',
          code: id,
        },
      })
    },
  },
  created() {
    this.getRoleList()
  },
}
</script>

<style lang="less" scope>
.button-size-r {
  width: 120px;
}
</style>